<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>

<body>
    <div id="app">
        <h3>你最喜欢哪个食物</h3>
        <input type="checkbox" v-model="all" @change="fullClick">全选<br>
        <span v-for="(item, index) in list"><input type="checkbox" v-model="item.check"
                @change="checkClick">{{item.name}}</span><br>
        新增其他：<input type="text" v-model="newName"><br>
        <input type="file" @change="load($event)"><button @click="add">上传</button><br>
        <button @click="selectAll">全选</button>
        <button @click="deselectAll">全不选</button>
        <button @click="invertSelect">反选</button><br>
        <span v-for="item in list"><img :src="item.src" style="width: 200px;height: 300px;"
                v-show="item.check==true"></span>
    </div>
</body>

</html>
<script>
    const appConn = Vue.createApp({
        data() {
            return {
                list: [{ name: '饺子', check: false, src: './饺子.png' },
                { name: '面条', check: false, src: './面条.PNG' },
                { name: '蛋糕', check: false, src: './蛋糕.PNG' }],
                all: false,
                newName:"",
                fileSrc:'',
            }
        },
        methods: {
            fullClick() {
                if (this.all) {
                    this.list.map(v => { v.check = true })
                }
                else {
                    this.list.map(v => { v.check = false })
                }
            },
            checkClick() {
                let flag = this.list.length
                this.list.map(v => {
                    if (!v.check) flag--
                })
                if (flag < this.list.length)
                    this.all = false
                else
                    this.all = true
            },
            load(e){
                let file=e.target.files
                let img =new FileReader()
                img.readAsDataURL(file[0])
                img.onload=({target})=>{
                    alert("上传成功")
                    this.fileSrc=target.result
                }
            },
            add(){
                this.list.push({name:this.newName,check:false,src:this.fileSrc})
            },
            selectAll() {
                this.all = true;
                this.fullClick();
            },
            deselectAll() {
                this.all = false;
                this.fullClick();
            },
            invertSelect() {
                this.list.forEach(item => item.check = !item.check);
            },
        }

    }).mount('#app')
</script>